<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>系统后台管理</title>

    <#include "public/public_css.ftl">

</head>

<body>

<div id="wrapper">
    <#-- s 导航 -->
    <#include "public/nav.ftl">
    <#-- e 导航 -->

    <#-- s 页面内容 -->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">用户管理</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-10">
                <!-- /.panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart-o fa-fw"></i> 用户管理
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-10">
                                <button type="button" class="btn btn-default" data-toggle="modal"
                                        data-target="#addBlogUser">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    新增
                                </button>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-striped">
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>用户登陆</th>
                                            <th>用户昵称</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <#list blogUserList as blogUser>
                                            <tr>
                                                <td>${blogUser_index+1 }</td>
                                                <td>${blogUser.userCode}</td>
                                                <td>${blogUser.userName}</td>
                                                <td>${blogUser.createTime?string('yyyy-MM-dd hh:mm:ss')}</td>
                                                <td>
                                                    <button name="updBtn"  value="${blogUser.id}" type="button" class="btn btn-default">
                                                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                                        修改
                                                    </button>
                                                    <button name="delBtn" value="${blogUser.id}" type="button" class="btn btn-default">
                                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                                        删除
                                                    </button>
                                                </td>
                                             </tr>
                                        </#list>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->
                            </div>
                            <!-- /.col-lg-4 (nested) -->
                            <div class="col-lg-8">
                                <div id="morris-bar-chart"></div>
                            </div>
                            <!-- /.col-lg-8 (nested) -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>

        </div>
        <!-- /.row -->
    </div>
    <#-- e 页面内容 -->
</div>

<!--添加的 Modal -->
<div class="modal fade" id="addBlogUser" tabindex="-1" role="dialog" aria-labelledby="addBlogUserModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="id_form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增用户</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group row">
                        <label for="id_home_title" class="col-sm-2 col-form-label">用户登陆</label>
                        <div class="col-sm-8">
                            <input  id="userCode" name="userCode"  placeholder="请输入用户登陆"  class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id_title_url" class="col-sm-2 col-form-label">用户昵称</label>
                        <div class="col-sm-8">
                            <input id="userName"  name="userName" placeholder="请输入用户昵称"  class="form-control" >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id_title_url" class="col-sm-2 col-form-label">用户密码</label>
                        <div class="col-sm-8">
                            <input id="userPwd"  name="userPwd" type="password"  placeholder="请输入用户密码" class="form-control" >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id_title_url" class="col-sm-2 col-form-label">确认密码</label>
                        <div class="col-sm-8">
                            <input id="conUserPwd"  name="conUserPwd" type="password"  placeholder="请输入确认密码"  class="form-control" >
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button id="saveUser" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--修改的 Modal -->
<div class="modal fade" id="updBlogUser" tabindex="-1" role="dialog" aria-labelledby="updBlogUserModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="id_form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">修改用户</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group row">
                        <label for="id_home_title" class="col-sm-2 col-form-label">用户登陆</label>
                        <div class="col-sm-8">
                            <input  id="updUserCode" name="userCode" readonly   class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id_title_url" class="col-sm-2 col-form-label">用户昵称</label>
                        <div class="col-sm-8">
                            <input id="updUserName"  name="userName" placeholder="请输入用户昵称"  class="form-control" >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id_title_url" class="col-sm-2 col-form-label">用户密码</label>
                        <div class="col-sm-8">
                            <input id="updUserPwd"  name="userPwd" type="password"  placeholder="请输入用户密码" class="form-control" >
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button id="saveUser" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<#include "public/public_js.ftl">

<script>
// java 程序员
// 5年前 java  mysql  html + js + jquery + jsp + freemarker
// 前后端分离 10 年
//  html+js  技术发展 ===》前端框架  React vue 接受度
//  java + 框架 mysql 后端
//  全栈   vue  + spring boot
  $(function () {

      function showConfirm(msg,callback){
          Modal.confirm(
              {
                  title:'删除提示',
                  msg: msg,
              }).on( function (e) {
              callback();
          });
      }
      //添加js
      $('#saveUser').on('click', function () {
          var strdata = $("#id_form").serializeArray();
          var obj={};//给obj分配内存
          for(var i =0;i<strdata.length;i++)
          {
              obj[strdata[i].name]=strdata[i]['value'];
          }
          $.ajax({
              type: "POST",
              url: "/admin/addbloguser",
              dataType:"json",
              contentType: "application/json;charset=utf-8",
              data: JSON.stringify(obj),
              success: function(data){
                  console.log(data.resultCode)
                  if(data.resultCode=="200"){
                      // var ops = {
                      //     msg: "添加成功",
                      // };
                      // Modal.alert(ops);
                      //$('#uploadModel').modal('toggle');
                      window.location.reload();
                  }else {
                      var ops = {
                          msg: data.resultMessage,
                      };
                      Modal.alert(ops);
                  }

                  // $(location).attr('href', '/admin/title');
              },
              error: function(){

              }
          });
      })
      //删除js
      $("[name='delBtn']").on('click', function () {
          var id = $(this).val();
          showConfirm("确认要删除吗？", function() {
              $(location).attr('href', '/admin/delUser?id='+id.toString());
          });
      });
      //修改js
      $("[name='updBtn']").on('click', function () {
          var id = $(this).val();
          var dataJson = {"id":id}
          $.ajax({
              type: "POST",
              url: "/admin/getUserById",
              dataType:"json",
              contentType: "application/json;charset=utf-8",
              data: JSON.stringify(dataJson),
              success: function(data){
                  //console.log(data)
                  if(data.resultCode=="200"){
                      var userData =   data.data;
                      //console.log(userData[0].userCode)
                      $("#updUserCode").val(userData[0].userCode);
                      $("#updUserName").val(userData[0].userName);
                      $("#updUserPwd").val(userData[0].userPwd);
                      $("#updBlogUser").modal('show');
                  }

              },
              error: function(){
              }
          });
      });
  });
</script>
</body>

</html>
